<template>
  <div
    class="mask"
    v-show="visible"
  >
    <transition name="fade-top">
      <div
        class="dialog"
        v-show="visible"
        :style="'width:'+width"
      >
        <div class="title">
          <span>{{title}}</span>
          <i
            v-if="isComponent"
            class="el-icon-close"
            @click="$emit('handleCancel')"
          ></i>
          <i
            v-if="!isComponent"
            class="el-icon-close"
            @click="$emit('update:visible', false)"
          ></i>
        </div>
        <slot></slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: ["title", "width", "visible", "isComponent"],
  data() {
    return {
      show: false
    };
  },
  methods: {
    goBack() {
      this.$emit("update:visible", false);
      this.$emit("back");
    }
  }
};
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  min-width: 1200px;
  z-index: 111;
  .dialog {
    min-width: 200px;
    max-height: 90%;
    overflow: auto;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    //   border-radius: 12px;
    .title {
      padding: 16px 20px;
      font-size: 16px;
      background: #e8e8e8;
      color: #333333;
      .el-icon-close {
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>
